<template>
  <div class="c-collapse-item">
    <div class="title" @click.stop="handleClick">
      <i :class="{'el-icon-caret-right':!showBody,'el-icon-caret-bottom':showBody}" />
      <slot name="title">{{ title }}</slot>
    </div>
    <transition name="fade">
      <div v-show="showBody" class="body">
        <slot />
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'CCollapseItem',
  props: {
    title: {
      type: String,
      default: ''
    },
    name: {
      type: [String, Number],
      default: ''
    },
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      showBody: true
    }
  },
  computed: {
  },
  methods: {
    handleClick() {
      this.showBody = !this.showBody
      this.$emit('input', this.showBody)
    }
  }
}
</script>
<style lang="scss" scoped>
.c-collapse-item{
  .title {
    display: flex;
    justify-items: center;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
    &>i{
      font-size: 24px;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: all .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .body{
    padding: 10px;
  }
}
  .c-collapse-item + .c-collapse-item {
    margin-top: 10px;
  }
</style>
